<template>
    <div class="box">
        <el-row class="list-head" v-if="myIndex != 5">
            <el-col :span="24" class="list-head-t" v-if="myIndex == 1">
                开发商所有制占比
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 2">
                开发商交付排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 3">
                开发商挪用预售资金排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 4">
                开发商剩余项目货值排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 6">
                项目剩余保交楼完成进度
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 7">
                开发商所有制占比
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 8">
                交付趋势
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 9">
                借款还款趋势
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 11">
                项目所属开发商统计
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 12">
                项目交付排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 13">
                挪用预售金排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 14">
                项目剩余货值排名
            </el-col>
            <el-col :span="24" class="list-head-t" v-if="myIndex == 15">
                省厅审核统计
            </el-col>
       
            <el-col :span="24" class="list-head-t" v-if="myIndex == 16">
                交付统计情况
            </el-col>
       
            <el-col :span="24" class="list-head-t" v-if="myIndex == 17">
                借款统计情况
            </el-col>
       
       
        </el-row>
        <el-row class="list-head list1" v-if="myIndex == 5">
            <el-col :span="24" class="list-head-t list-head-t-l" >
                开发商列表
            </el-col>
        </el-row>
        <el-row class="list-head list1" v-if="myIndex == 10">
            <el-col :span="24" class="list-head-t list-head-t-l" >
                项目交付进度
            </el-col>
        </el-row>
        <el-row class="list-head list-head-kfsxq list1" v-if="myIndex == 18">
            <el-col :span="24" class="list-head-t d list-head-t-l" >
                交付趋势
            </el-col>
        </el-row>
   
    </div>
  </template>
   
<script setup>
import { ref,defineProps,onMounted } from 'vue';
const props = defineProps({
    myIndex: {
    type: Number,
    required: true,
  },
});
</script>
   
  <style scoped lang="less">
  .box{
  }

  .list1{
    background-image: url('@/assets/img/bjBuilding/listbg1.png') !important;
  }
  .list-head-kfsxq{
    background-image: url('@/assets/img/bjBuilding/xmxqbj.png') !important;
  }
 .list-head{
        height: 15%;
        background-image: url('@/assets/img/bjBuilding/listbg.png');
        background-size: 100% 100%;
        color: #FFFFFF;
        
     }
     .list-head-t{
        background: -webkit-linear-gradient(to bottom, #FFFFFF ,#A1B8EA 100%);
        background: linear-gradient(to bottom, #FFFFFF, #A1B8EA 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        font-size: 21px;
        padding: 0px 35px;
        box-sizing: border-box;
        font-weight: 600;
        height: 42px;
     }
     .list-head-r{
        padding: 3px 0px;
        .kfs{
            width: 88px;
            height: 25px;
            background-size: 100% 100%;
            text-align: center;
            background: url('@/assets/img/bjBuilding/kfs.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
     }
    
    .list-head > div:first-child{
        display: flex;
        align-items: center;
        position: relative;
        bottom:5px;
    }
    .list-head-t-l{
        padding-left: 40px;
    }
  </style>